$mainpic: '/assets/images/pic.jpg';
$github: '/assets/images/bg.jpg';
$yellow: #ff7800;
$grey: #666;

.bodyer{
	padding-top: 60px;
}

.page404{
	text-align: center;
	padding: 60px 0;
}

/*  主题图 */
.main-pic{
	height: 525px;
	background: #222;
	.main-inner{
		height: 100%;
		width: 1300px;
		margin: 0 auto;
		background: url($mainpic) no-repeat center;
		text-align: center;
		h1{
			font-size: 43px;
			color: #fff;
			padding-top: 80px;
		}
		h2{
			letter-spacing: 20px;
			color: #fff;
			padding-top: 40px;
		}
		.btns{
			padding-top: 40px;
			.btn{
				width: 210px;
				height: 60px;
				text-align: center;
				line-height: 60px;
				font-size: 20px;
				display: inline-block;
				margin: 0 20px;
			}
			.btn-introduce{
				border: 4px solid $yellow;
				color: $yellow;
				background: rgba(255, 120, 0, .2);
				line-height: 52px;
				height: 52px;
			}
			.btn-downcode{
				background: $yellow;
				color: #fff;
			}
		}

		.downcount{
			padding-top: 20px;
			color: #fff;
			em{
				color: $yellow;
				font-size: 32px;
				padding: 0 10px;
			}
		}

		.joinus{
			padding-top: 20px;
			span{
				background: rgba(0,0,0, .2);
				padding: 2px 10px;
				border-radius: 2px;
				color: #fff;
				display: inline-block;
			}
		}

	}
}

.main-module{
	width: 1300px;
	margin: 0 auto;
	text-align: center;
	h1.title{
		padding-top: 80px;
		font-size: 30px;
	}
	h2.des{
		padding-top: 10px;
		color: $grey;
		font-size: 14px;
	}
}

.main-introduce{
	.modules{
		padding-top: 40px;
		text-align: center;
		.iconfont {
			font-size: 70px;
			color: $yellow;
			padding: 10px 0;
		}
		li{
			display: inline-block;
			width: 18%;
			padding: 0 10px;
			h3{
				font-size: 20px;
				padding: 10px 0;
			}
			p{
				color: $grey;
				font-size: 14px;
			}
		}
	}
}

.main-utils{
	ul{
		padding: 30px 0; 
	}
	li{
		display: inline-block;
	}
}

.main-github{
	background: url($github) center;
	text-align: center;
	color: #fff;
	height: 280px;
	.github-box{
		padding-top: 60px;
		h1{
			padding-bottom: 40px;
		}
	}
}